<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心-我的菜单</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        window.onload = function () {
            document.querySelector('#headPic').onclick = function () {
                document.querySelector('#headPic input').click()     //模拟表单元素被单击
            }
        }
        function changeHeadPic() {
            //1.获取图片文件
            var fileHead = document.querySelector('#headPic input').files[0]
            //2.文件读取图片
            var fread = new FileReader()
            fread.onload = function (e) {
                //3.把图片显示在页面中
                document.querySelector('#headPic>img').src = e.target.result
            }
            fread.readAsDataURL(fileHead)
        }
        window.onload = function () {
            if (localStorage.getItem('loginName')) {
                // var links = document.querySelectorAll('#headright a')
                // for (var i = 0; i < links.length; i++) {
                //     links[i].style.display = 'none';
                // }..
                var username = document.querySelectorAll('.loginName')
                for(var i = 0;i<username.length;i++){
                    username[i].innerHTML = localStorage.getItem('loginName')
                }
            }
        }
    </script>
    <link href="css/personal.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
</head>

<body>
    <div id="main">
        <nav class="menu-wrap">
            <div id="headPic">
                <img id="headPicimg" src="images/icon_shangjie.gif" alt="">
                <div id="mask">
                    <img id="innerImg"
                        src=""
                        alt="">
                </div>
                <form action="#">
                    <input type="file" name="" id="" accept="image/jpg" onchange="changeHeadPic()" style="display:none">
                </form>
            </div>
            <div class="menu">
                <ul>

                    <li>
                        <a href="shouye.html">
                            <i class="fa fa-home fa-lg"></i>
                            <span class="nav-text">首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="edit.html">
                            <i class="fa fa-bullhorn fa-lg"></i>
                            <span class="nav-text">编辑资料</span>
                        </a>
                    </li>
                    <li>
                        <a href="sharemenu.html">
                            <i class="fa fa-user fa-lg"></i>
                            <span class="nav-text">上传菜谱</span>
                        </a>
                    </li>
                    <li>
                        <a href="personal.html">
                            <i class="fa fa-envelope-o fa-lg"></i>
                            <span class="nav-text">已发布的内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="shoucang.html">
                            <i class="fa fa-heart-o fa-lg"></i>
                            <span class="nav-text">收藏</span>
                        </a>
                    </li>
                    <li>
                        <a href="integral.html">
                            <i class="fa fa-shopping-bag fa-lg"></i>
                            <span class="nav-text">积分兑换</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <div id="essay">
            <div id="inner">
                <ul>
                    <li></li>
                    <li><span class="loginName"></span>发布于2019-08-11 12:12:12</li>
                    <li><a class="fa fa-trash">删除</a></li>
                </ul>
                <div id="pic">
                    <p>夏日营养套餐</p>
                    <img src="images/jydft.jpg" alt="">
                    <img src="images/ksj.jpg" alt="">
                    <img src="images/lbpddf.jpg" alt="">
                    <a href="top1.html" class="detail">详情...</a>
                </div>
            </div>
            <div id="inner">
                <ul>
                    <li></li>
                    <li><span class="loginName"></span>发布于2019-08-11 12:12:12</li>
                    <li><a class="fa fa-trash">删除</a></li>
                </ul>
                <div id="pic">
                    <p>夏日至尊套餐</p>
                    <img src="images/hsrddj.jpg" alt="">
                    <img src="images/qjrs.jpg" alt="">
                    <img src="images/zcdht.jpg" alt="">
                    <a href="#" class="detail">详情...</a>
                </div>
            </div>
            <div id="inner">
                <ul>
                    <li></li>
                    <li><span class="loginName"></span>发布于2019-08-11 12:12:12</li>
                    <li><a class="fa fa-trash">删除</a></li>
                </ul>
                <div id="pic">
                    <p>夏日缤纷套餐</p>
                    <img src="images/yxrs.jpg" alt="">
                    <img src="images/sltds.jpg" alt="">
                    <img src="images/rmzdf.jpg" alt="">
                    <a href="#" class="detail">详情...</a>
                </div>
            </div>
            <div id="inner">
                <ul>
                    <li></li>
                    <li><span class="loginName"></span>发布于2019-08-11 12:12:12</li>
                    <li><a class="fa fa-trash">删除</a></li>
                </ul>
                <div id="pic">
                    <p>清凉一夏套餐</p>
                    <img src="images/qzly.jpg" alt="">
                    <img src="images/hpqj.jpg" alt="">
                    <img src="images/nrlbt.jpg" alt="">
                    <a href="#" class="detail">详情...</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>